<template>
  <div class="page_content daraBoardLint_content">
    <!-- <div class="header_title flex flex-ac pl-10">
      <div class="icon">
        <img :src="iconPng" class="img" />
      </div>
      <div class="title ml-10">管养报表填报率</div>
    </div> -->
    <div class="header_box p-10 bold flex flex-ac flex-jsb">
      <div class="title">进站数据统计</div>
    </div>
    <div class="main_box p-10 grid">
      <div
        v-for="item in boxBodyList"
        :key="item.id"
        class="main_item flex flex-ac"
      >
        <div class="txt">{{ item.name }}</div>
        <div class="val ml-15" :class="item.val == 0 ? 'hui' : ''">
          {{ item.val }}
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  computed,
  watch,
  onMounted,
  onBeforeUnmount,
  reactive,
  shallowRef,
} from "vue";
import { useStore } from "vuex";
import * as echarts from "echarts";
const store = useStore();

const props = defineProps<{}>();
const iconPng = new URL("@/assets/img/index/pf.png", import.meta.url).href;
let boxBodyList = ref([
  {
    name: "某某某某",
    val: 5,
    id: 1,
  },
  {
    name: "某某某某",
    val: 0,
    id: 2,
  },
  {
    name: "某某某某",
    val: 5,
    id: 3,
  },
  {
    name: "某某某某",
    val: 5,
    id: 4,
  },
]);
onMounted(() => {});

onBeforeUnmount(() => {});

// option = {
//   series: [
//     {
//       type: 'gauge',
//       startAngle: 180,
//       endAngle: 0,
//       min: 0,
//       max: 240,
//       splitNumber: 12,
//       itemStyle: {
//         color: '#58D9F9',
//         shadowColor: 'rgba(0,138,255,0.45)',
//         shadowBlur: 10,
//         shadowOffsetX: 2,
//         shadowOffsetY: 2
//       },
//       progress: {
//         show: true,
//         roundCap: true,
//         width: 18
//       },
//       pointer: {
//         icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
//         length: '75%',
//         width: 16,
//         offsetCenter: [0, '5%']
//       },
//       axisLine: {
//         roundCap: true,
//         lineStyle: {
//           width: 18
//         }
//       },
//       axisTick: {
//         splitNumber: 2,
//         lineStyle: {
//           width: 2,
//           color: '#999'
//         }
//       },
//       splitLine: {
//         length: 12,
//         lineStyle: {
//           width: 3,
//           color: '#999'
//         }
//       },
//       axisLabel: {
//         distance: 30,
//         color: '#999',
//         fontSize: 20
//       },
//       title: {
//         show: false
//       },
//       detail: {
//         backgroundColor: '#fff',
//         borderColor: '#999',
//         borderWidth: 2,
//         width: '60%',
//         lineHeight: 40,
//         height: 40,
//         borderRadius: 8,
//         offsetCenter: [0, '35%'],
//         valueAnimation: true,
//         formatter: function (value) {
//           return '{value|' + value.toFixed(0) + '}{unit|km/h}';
//         },
//         rich: {
//           value: {
//             fontSize: 50,
//             fontWeight: 'bolder',
//             color: '#777'
//           },
//           unit: {
//             fontSize: 20,
//             color: '#999',
//             padding: [0, 0, -20, 10]
//           }
//         }
//       },
//       data: [
//         {
//           value: 100
//         }
//       ]
//     }
//   ]
// };
</script>

<style lang="scss" scoped>
.daraBoardLint_content {
  height: 320px;
  .header_title {
    height: 40px;
    background: linear-gradient(to right, rgb(216, 242, 252), #ffffff);
    .icon {
      width: 26px;
      height: 26px;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .title {
      font-size: 16px;
      font-weight: 550;
      color: #333333;
    }
  }
  .main_box {
    height: calc(100% - 40px);
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    justify-content: center;
    .main_item {
    }
    .txt {
      color: #5f5f5f;
    }
    .val {
      color: #1890ff;
      font-size: 18px;
    }
    .hui {
      color: #5f5f5f;
    }
  }
}
</style> 